<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test for issue #144 (autofill)</title>
  <link rel="icon" href="data: ,">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.css">
  <link rel="stylesheet" href="../../../dist/css/datepicker-bulma.css">
  <style>
    .pre-wrap {
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
  <section class="section">
    <div class="container">
      <form action="." method="post">
        <div class="field">
          <label for="test-date" class="label">Test date</label>
          <div class="control">
            <input type="text" id="test-date" name="test-date" class="input date" autocomplete="on">
          </div>
        </div>
        <div class="field">
          <div class="control">
            <button type="submit" class="button">Submit</button>
          </div>
        </div>
      </form>
    </div>
  </section>
  <section class="section">
    <div class="container">
<pre class="pre-wrap">
1. Run local http serer at the project root
   e.g. &gt; cd path/to/vanillajs-datepicker
        &gt; http-server ./
2, Using Chromium-based browser, open this test file through the local http serer
   e.g. http://localhost:8080/test/non-automated/for-issue-144-autofill/index.html
3. Type a date in the input field (do not choose from Datepicker), and submit
4. Open the browser's console in Dev Tools
5. Click the input field, and select a date from the autofill
5. See if no error is output in the console
</pre>
    </div>
  </section>
  <script src="../../../dist/js/datepicker.js"></script>
  <script>
    var el = document.getElementById('test-date');
    el.addEventListener('keydown', (ev) => {
      console.log(ev);
    });

    var datepicker = new Datepicker(el);
  </script>
</body>
</html>
